<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" th:href="@{/component/pear/css/pear.css}"/>
    <style>
      .down {
        color: #1E9FFF;
        text-decoration: underline
      }

      div .base {
        font-size: 13px !important;
      }

    </style>
  </head>
  <body>
    <form class="layui-form" action="">
      <div class="mainBox">
        <div class="main-container">
          <div class="main-container">
            <div class="layui-form-item">
              <label class="layui-form-label">父级</label>
              <div class="layui-input-block">
                <ul id="selectParent" name="parentId" class="dtree" data-id="-1"></ul>
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">名称</label>
              <div class="layui-input-block">
                <input type="text" name="menuName" lay-verify="title" autocomplete="off"
                       placeholder="权限名称"
                       class="layui-input">
              </div>
            </div>
            <div class="layui-form-item" id="powerCodeItem">
              <label class="layui-form-label">标识</label>
              <div class="layui-input-block">
                <input type="text" id="powerCode" name="menuCode" autocomplete="off" placeholder="权限标识"
                       class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">状态</label>
              <div class="layui-input-block">
                <input type="radio" lay-filter="powerType" name="menuType" value="0" title="目录">
                <input type="radio" lay-filter="powerType" name="menuType" value="1" title="菜单"
                       checked>
                <input type="radio" lay-filter="powerType" name="menuType" value="2" title="按钮">
              </div>
            </div>
            <div class="layui-form-item" id="powerUrlItem">
              <label class="layui-form-label">路径</label>
              <div class="layui-input-block">
                <input type="text" id="powerUrl" name="menuUrl" autocomplete="off" placeholder="菜单路径"
                       class="layui-input">
              </div>
            </div>
            <div class="layui-form-item" id="openTypeItem">
              <label class="layui-form-label">打开</label>
              <div class="layui-input-block">
                <select name="openType" id="openType">
                  <option value=""></option>
                  <option value="_iframe">框架</option>
                  <option value="_blank">签页</option>
                </select>
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">图标</label>
              <div class="layui-input-block">
                <input type="text" id="icon" name="icon" lay-filter="icon" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">排序</label>
              <div class="layui-input-block">
                <input type="text" name="sort" lay-verify="title" autocomplete="off" placeholder="排序"
                       class="layui-input">
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="button-container">
          <button type="submit" class="pear-btn submit pear-btn-primary pear-btn-sm" lay-submit=""
                  lay-filter="power-save">
            <i class="layui-icon layui-icon-ok"></i>
            提交
          </button>
          <button type="reset" class="pear-btn pear-btn-sm">
            <i class="layui-icon layui-icon-refresh"></i>
            重置
          </button>
        </div>
      </div>
    </form>
    <script th:src="@{/component/layui/layui.js}"></script>
    <script th:src="@{/component/pear/pear.js}"></script>
    <script th:src="@{/component/my/const.js}"></script>
    <script>
      layui.use(['form', 'jquery', 'iconPicker', 'dtree','button'], function () {
        let form = layui.form;
        let $ = layui.jquery;
        let iconPicker = layui.iconPicker;
        let dtree = layui.dtree;
        var button = layui.button;

        // dictionary fast 里面有字典模块的封装

        dtree.renderSelect({
          elem: "#selectParent",
          url: suffix + "/menu/selectParent",
          method: 'get',
          selectInputName: {nodeId: "parentId", context: "menuName"},
          skin: "layui",
          dataFormat: "list",
          response: {treeId: "menuId", parentId: "parentId", title: "menuName"},  //修改response中返回数据的定义
          selectInitVal: "0"
        });

        form.on("radio(powerType)", function () {
          if (this.value == '0') {
            $("#powerUrlItem").hide();
            $("#powerCodeItem").hide();
            $("#openTypeItem").hide();
            $("#powerUrl").val("");
            $("#powerCode").val("");
            $("#openType").val("");
          } else if (this.value == '1') {
            $("#powerUrlItem").show();
            $("#powerCodeItem").show();
            $("#openTypeItem").show();
          } else if (this.value == '2') {
            $("#powerUrlItem").hide();
            $("#openTypeItem").hide();
            $("#powerCodeItem").show();
            $("#powerUrl").val("");
            $("#openType").val("");
          }
        });

        form.on('submit(power-save)', function (data) {
          data.field.icon = "layui-icon " + data.field.icon;
          let btn = button.load({elem: '.submit'});

          $.ajax({
            url: suffix + '/menu/add',
            data: data.field,
            dataType: 'json',
            type: 'post',
            success: function (result) {
              btn.stop({
                text: "提交",
                elem: '.submit',
                time: 1000,
                done: function () {
                  if (result.success) {
                    layer.msg(result.msg, {icon: 1, time: 1000}, function () {
                      parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
                      parent.render();
                    });
                  } else {
                    layer.msg(result.msg, {icon: 2, time: 1000});
                  }
                }
              })
            }
          })
          return false;
        });

        iconPicker.render({
          // 选择器，推荐使用input
          elem: '#icon',
          // 数据类型：fontClass/unicode，推荐使用fontClass
          type: 'fontClass',
          // 是否开启搜索：true/false
          search: true,
          // 是否开启分页
          page: true,
          // 每页显示数量，默认12
          limit: 12,
          // 点击回调
          click: function (data) {
            console.log(data);
          }
        });
      })
    </script>
    <script>
    </script>
  </body>
</html>
